<%@ taglib prefix="s" uri="/struts-tags"%>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title><s:text name="photo.gallery.title"/></title>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/layout/111.css" media="screen"/>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/my-theme/jquery-ui.css"/>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/common.css" media="screen"/>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/list/menu.css"/>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/list/mb-menu.css"/>
  		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/photo-edit.css"/>
  		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/overlay/simple-no-js.css"/>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/lib/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/lib/jquery.metadata.js"></script>
  		<script type="text/javascript" src="${pageContext.request.contextPath}/js/lib/mbMenu.js"></script>
  		<script type="text/javascript" src="${pageContext.request.contextPath}/js/lib/jquery.hoverIntent.js"></script>
  		<script type="text/javascript" src="${pageContext.request.contextPath}/js/lib/jquery.ui.core.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/lib/jquery.ui.widget.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/lib/jquery.ui.mouse.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/lib/jquery.ui.sortable.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/lib/jquery.ui.button.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/lib/jquery.ui.position.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/lib/jquery.ui.resizable.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/lib/jquery.tools.overlay.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/lib/jquery.ui.draggable.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/pages/common.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/pages/header.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/member/photo.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/member/photo-crop.js"></script>
	</head>
	<body>
		<div id="container">
			<s:include value="../header.jsp" />
			
		    <div id="content">
		    	<h3>Profile Photos:</h3>
		  		<div class="main">
		  			<div class="feedback-pane"></div>
		  			<s:form id="photoSaveForm" action="photo-save" theme="simple">
		  			<input type="hidden" name="id" value="<s:property value="id"/>"/>
		  			<ul id="sortable">
		  				<s:iterator var="i" value="tempImageNames" status="status">		  				
			  			<li>
			  				<input type="hidden" name="tempImageNames" value="<s:property value="#i"/>"/>
			  				<a class="cmVoice {cMenu:'conext_menu_1'}">
			  					<img class="thumb" src="${pageContext.request.contextPath}/<s:property value="imageFolder"/><s:property value="id"/>/<s:property value="#i"/>"/>
			  				</a>
			  				<div class="overlay_simple medium" id="overlay-<s:property value="#status.count"/>">
								<h3>Add Caption</h3>
								<textarea name="captions" rows="5" cols="40"></textarea>
							</div>
							<div class="overlay_simple" id="cover-<s:property value="#status.count"/>" style="width:600px">
				  				<div class="content">
					  				<a class="close"></a>
					  				<a class="ok"></a>
					  				<div class="preview">
					  					<input type="hidden" name="xywh" value=""/>
						  				<img src="${pageContext.request.contextPath}/<s:property value="imageFolder"/><s:property value="id"/>/<s:property value="#i"/>"/>
						  				<div class="highlight"></div><div class="overlay"></div>
					  				</div>
				  				</div>
				  			</div>
			  			</li>
		  				</s:iterator>		
		  			</ul>
		  			</s:form>
		  			<div class="clear-both"></div>
		  			<a class="button" name="submitPhotoSave" href="#"><s:text name="btn.save"/></a>
		  		</div>
			</div>
			<!-- end of content -->
			<s:include value="../footer.jsp" />
		</div>
		
		<div id="conext_menu_1" class="mbmenu">
			<a class="{action: 'addCaption()', img: 'comment.png'}" >Add Caption</a>
			<a class="{action: 'setCover()', img: 'trashcan.png'}" >Set As Cover</a>
			<a class="{action: 'removeImage()', img: 'trashcan.png'}" >Delete</a>
		</div> 
		
		<div class="ui-widget-overlay" style="display:none"></div>
	</body>
</html>